<template>
  <div class="main">
    <div class="header">
      <div class="search">
        <el-input placeholder="请输入内容" v-model="searchdata" clearable >
        </el-input>
        <el-button type="primary" icon="el-icon-search" @click="getsearchList()">搜索</el-button>
      </div>
    </div>
    <div class="middle">
      <div class="check">
        <div class="title">所属组织</div>
        <div style="margin-left:3%"><el-checkbox-group  v-model="checkList" @change="getdata(checkList)">
            <el-checkbox v-for="item in checkboxOptions" :key="item.value" :label="item.value">{{ item.label
            }}</el-checkbox>
          </el-checkbox-group></div>
      </div>
      <div class="check">
        <div class="title">职级</div>
        <div style="margin-left:3%"><el-checkbox-group v-model="checkList"  @change="getdata(checkList)">
            <el-checkbox v-for="item in JobleavelOptions" :key="item.value" :label="item.value">{{ item.label
            }}</el-checkbox>
          </el-checkbox-group></div>
      </div>
      <div class="check">
        <div class="title">职称</div>
        <div style="margin-left:3%"><el-checkbox-group v-model="checkList"  @change="getdata(checkList)">
            <el-checkbox v-for="item in JobtitleOptions" :key="item.value" :label="item.value">{{ item.label
            }}</el-checkbox>
          </el-checkbox-group></div>
      </div>
      <div class="check">
        <div class="title">年龄</div>
        <div style="margin-left:3%"><el-checkbox-group v-model="checkList"  @change="getdata(checkList)">
            <el-checkbox v-for="item in AgeOptions" :key="item.value" :label="item.value">{{ item.label
            }}</el-checkbox>
          </el-checkbox-group></div>
      </div>
      <div class="check">
        <div class="title">性别</div>
        <div style="margin-left:3%"><el-checkbox-group v-model="checkList"  @change="getdata(checkList)">
            <el-checkbox v-for="item in SexOptions" :key="item.value" :label="item.value">{{ item.label
            }}</el-checkbox>
          </el-checkbox-group></div>
      </div>
      <div class="check">
        <div class="title">婚姻状况</div>
        <div style="margin-left:3%"><el-checkbox-group v-model="checkList"  @change="getdata(checkList)">
            <el-checkbox v-for="item in MarriedOptions" :key="item.value" :label="item.value">{{ item.label
            }}</el-checkbox>
          </el-checkbox-group></div>
      </div>
      <div class="check">
        <div class="title">学历</div>
        <div style="margin-left:3%"><el-checkbox-group v-model="checkList"  @change="getdata(checkList)">
            <el-checkbox v-for="item in EducationalOptions" :key="item.value" :label="item.value">{{ item.label
            }}</el-checkbox>
          </el-checkbox-group></div>
      </div>
      <div class="check">
        <div class="title">政治面貌</div>
        <div style="margin-left:3%"><el-checkbox-group v-model="checkList"  @change="getdata(checkList)">
            <el-checkbox v-for="item in PoliticalOptions" :key="item.value" :label="item.value">{{ item.label
            }}</el-checkbox>
          </el-checkbox-group></div>
      </div>
      <div class="check">
        <div class="title">近三年考核</div>
        <div style="margin-left:3%"><el-checkbox-group v-model="checkList"  @change="getdata(checkList)">
            <el-checkbox v-for="item in EvaluationOptions" :key="item.value" :label="item.value">{{ item.label
            }}</el-checkbox>
          </el-checkbox-group></div>
      </div>
    </div>
    <div class="footer">
      <div class="table">
        <el-table :data="tableData" style="width: 100%" stripe  :header-cell-style="{background: '#F4F7FF'}">
          <el-table-column prop="name" label="姓名" width="80">
          </el-table-column>
          <el-table-column prop="age" label="年龄" width="80">
          </el-table-column>
          <el-table-column prop="sex" label="性别">
          </el-table-column>
          <el-table-column prop="maritalstatus" label="婚姻状况" width="180">
          </el-table-column>
          <el-table-column prop="political" label="政治面貌" width="180">
          </el-table-column>
          <el-table-column prop="qualification" label="学历">
          </el-table-column>
          <el-table-column prop="organization" label="单位" width="180">
          </el-table-column>
          <el-table-column prop="rank" label="职级"  width="130">
          </el-table-column>
          <el-table-column prop="professional" label="职称">
          </el-table-column>
          <el-table-column prop="assessment" label="近三年考核成绩" width="180">
          </el-table-column>
          <el-table-column fixed="right" label="详情" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="page">
        <div>共{{total}}条</div>
        <el-pagination background layout="prev, pager, next"  :page-size="10" :total="100">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchdata: '',
      total:1000,
      checkList: [],
      checkboxOptions: [
        { value: '集团公司', label: '集团公司' },
        { value: '中文传媒', label: '中文传媒' },
        { value: '华章投资', label: '华章投资' },
        { value: '华章置业', label: '华章置业' },
        { value: '电影集团', label: '电影集团' },
      ],
      JobleavelOptions: [
        { value: '集团领导', label: '集团领导' },
        { value: '集团中层', label: '集团中层' },
        { value: '集团主管', label: '集团主管' },
        { value: '集团主办及以下', label: '集团主办及以下' },
      ],
      JobtitleOptions: [
        { value: '正高', label: '正高' },
        { value: '副高', label: '副高' },
        { value: '中级', label: '中级' },
        { value: '助理', label: '助理' },
        { value: '员级', label: '员级' },
      ],
      AgeOptions: [
        { value: '25岁及以下', label: '25岁及以下' },
        { value: '25~35岁', label: '25~35岁' },
        { value: '35~45岁', label: '35~45岁' },
        { value: '45~55岁', label: '45~55岁' },
        { value: '55岁以上', label: '55岁以上' },
      ],
      SexOptions: [
        { value: 'man', label: '男' },
        { value: 'woman', label: '女' },
      ],
      MarriedOptions: [
        { value: '已婚', label: '已婚' },
        { value: '未婚', label: '未婚' },
        { value: '离婚', label: '离婚' },
        { value: '丧偶', label: '丧偶' },
      ],
      EducationalOptions: [
        { value: '博士研究生', label: '博士研究生' },
        { value: '硕士研究生', label: '硕士研究生' },
        { value: '大学本科', label: '大学本科' },
        { value: '大学专科', label: '大学专科' },
        { value: '高中及以下', label: '高中及以下' },
      ],
      PoliticalOptions: [
        { value: '中共党员', label: '中共党员' },
        { value: '中共预备党员', label: '中共预备党员' },
        { value: '共青团员', label: '共青团员' },
        { value: '群众', label: '群众' },
        { value: '民建会员', label: '民建会员' },
        { value: '民盟会员', label: '民盟会员' },
        { value: '民进会员', label: '民进会员' },
        { value: '民革会员', label: '民革会员' },
        { value: '致公党员', label: '致公党员' },
        { value: '其他', label: '其他' },
      ],
      EvaluationOptions:[
      { value: '优秀', label: '优秀' },
        { value: '良好', label: '良好' },
        { value: '合格', label: '合格' },
        { value: '称职', label: '称职' },
        { value: '基本称职', label: '基本称职' },
        { value: '其他', label: '其他' },
      ],
      tableData: [
        {
          name: '李海平',
          age: '24',
          sex: '男',
          maritalstatus:'未婚',
          political:'群众',
          qualification:'大学本科',
          organization:'集团公司',
          rank:'集团主办及以下',
          professional:'助理',
          assessment:'无、合格、合格',
        },
        {
          name: '胡鹏',
          age: '24',
          sex: '男',
          maritalstatus:'未婚',
          political:'群众',
          qualification:'大学本科',
          organization:'中文传媒',
          rank:'集团主办及以下',
          professional:'员级',
          assessment:'无、合格、合格',
        },
        {
          name: '杜新宇',
          age: '24',
          sex: '女',
          maritalstatus:'未婚',
          political:'群众',
          qualification:'大学本科',
          organization:'集团公司',
          rank:'集团主办及以下',
          professional:'中级',
          assessment:'无、合格、合格',
        },
        {
          name: '陈泽宇',
          age: '24',
          sex: '男',
          maritalstatus:'未婚',
          political:'群众',
          qualification:'硕士研究生',
          organization:'中文传媒',
          rank:'集团主办及以下',
          professional:'员级',
          assessment:'无、合格、合格',
        },
      ],
    };
  },
  methods:{
    getdata(value){
      console.log('选中的值:', value);
    },
    handleClick(value){
     console.log(value)
     // 使用params传递参数
     this.$router.push({ path: '/detail', query: { name: value.name } });
    },
    getsearchList(){
      console.log(this.searchdata)
      alert(this.searchdata)
    },
  },
};
</script>
<style lang="less" scoped>
.main{
  overflow: auto;
}
.header {
  width: 100%;
  display: flex;
  justify-content: center;
}

.search {
  display: flex;
  align-items: center;
  height: 50px;
  width: 50%;
}

.middle {
  display: flex;
  justify-content: center;
  flex-direction: column;
  background-color: #FCFCFC;
  width: 96%;
  margin-left: 2%;
  border-radius: 10px;
  .check {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 2%;
    margin-top: 0.5%;

    .title {
      font-size: medium;
      width: 100px;
      text-align: right;
      font-weight: 600;
    }
  }
}

.footer {
  width: 96%;
  margin-left: 2%;
  display: flex;
  // margin-top: 10px;
  justify-content: center;
  /* 水平居中 */
  flex-direction: column;
}

.table {}
.page{
  display: flex;
  justify-content: center;
  margin-top: 10px;
  align-items: center;
}
</style>

